<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>css3特效</title>
		<style>
			div {
				/*使用margin进行居中处理*/
				margin: 10px auto;
				/**设定div的边线**/
				border-width: 1px;
				border-style: solid;
				width: 400px;
				/***设置div的圆角***/
				-moz-border-radius: 8px;
				-khtml-border-radius: 8px;
				-webkit-border-radius: 8px;
				border-radius: 8px;
				padding: 5px;
				/**文字阴影效果**/
				text-shadow: 3px 4px 2px #88C1DC;
			}
			
			img.opacity1 {
				/*设置背景图片的透明度**/
				opacity: 0.10;
			}
			
			img.opacity2 {
				opacity: 0.50;
			}
			
			img.opacity3 {
				opacity: 0.75;
			}
		</style>
	</head>

	<body>
		<div style="padding-left: 20px; margin-bottom: 20px;">在Firefox和Safari 3的浏览器里能看到圆角效果</div>

		<div><img src="http://imgcache.qq.com/ac/www_tencent/zh-cn/images/sitelogo_zh-cn.gif" class="opacity1" alt="tencent" /></div>
		<div><img src="http://imgcache.qq.com/ac/www_tencent/zh-cn/images/sitelogo_zh-cn.gif" class="opacity2" alt="tencent" /></div>
		<div><img src="http://imgcache.qq.com/ac/www_tencent/zh-cn/images/sitelogo_zh-cn.gif" class="opacity3" alt="tencent" /></div>

	</body>

</html> 